<template>
    <div class="vipContainer">
        <div class="vipContent">
            <div class="back" @click="goBack"></div>
            <p class="title">开通会员</p>
            <div class="other"></div>
        </div>
        <div class="vipInfo">
            <div class="userInfo">
                <div class="userImg"></div>
                <div class="info">
                    <p class="userName">{{ user.name }}</p>
                    <p class="userContent">{{ user.content }}</p>
                </div>
            </div>
            <p class="vipSay">会员专属特权，为多囊卵巢患者打造更加个性化的改善计划</p>
        </div>
        <div class="vipRight">
            <p class="vipRightTitle">会员权益</p>
            <div class="rightContent">
                <div class="right">
                    <div class="rightImg first"></div>
                    <p class="rightTitle">专属饮食计划</p>
                </div>
                <div class="right">
                    <div class="rightImg second"></div>
                    <p class="rightTitle">专属运动计划</p>
                </div>
                <div class="right">
                    <div class="rightImg third"></div>
                    <p class="rightTitle">商城代金券</p>
                </div>
            </div>
        </div>
        <div class="openVip">
            <p class="openTitle">开通会员</p>
            <div class="openContainer">
                <div class="open">
                    <div class="openContent">
                        <p class="openTime">连续包月</p>
                        <p class="openMoney">￥<span>{{ monthMoney }}</span></p>
                        <p class="beforeMoney">￥21</p>
                    </div>
                </div>
                <div class="open">
                    <div class="openContent">
                        <p class="openTime">连续包季</p>
                        <p class="openMoney">￥<span>{{ seasonMoney }}</span></p>
                        <p class="beforeMoney">￥51</p>
                    </div>
                </div>
                <div class="open">
                    <div class="openContent">
                        <p class="openTime">连续包年</p>
                        <p class="openMoney">￥<span>{{ yearMoney }}</span></p>
                        <p class="beforeMoney">￥268</p>
                    </div>
                </div>
            </div>
            <p class="openSay">首月10元/月，到期按21元/月自动续费，可随时取消</p>
        </div>
        <div class="payVip">
            <div class="payVipContent">
                <div class="paySay">
                        <van-radio value="1" class="payRadio" @click="changeSituation" checked-color="rgb(231, 205, 153)" icon-size="17px" v-model="radioSituation"></van-radio>
                    我已阅读并同意《会员服务协议》<span>和</span>《自动续费声明》
                </div>
                <div class="clickPay"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import {  Radio } from 'vant';
    export default {
        name:'openVip',
        components:{
            'van-radio':Radio
        },
        data(){
            return{
                radioSituation:'1',
                monthMoney:10,
                seasonMoney:34,
                yearMoney:188,
                user:{name:'VVvVOK',content:'您还不是会员，开通享更多权益'}
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            },
            changeSituation(){
                console.log(this.radioSituation);
                if(this.radioSituation==='1'){
                    this.radioSituation='2'
                }
                else if(this.radioSituation==='2'){
                    this.radioSituation='1'
                }
            }
        }
    }
</script>

<style scoped>
    .vipContainer{
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .vipContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        height: 0.32rem;
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .other{
        width: .32rem;
        height: 0.32rem;
    }
    .vipInfo{
        width: 6.86rem;
        height: 2rem;
        margin: 0 auto;
        background-image: url(../assets/img/1-icon@2x/1-31vipInfo.png);
        background-position: center;
        background-size: contain;
        border-radius: .2rem;
        display: flex;
        flex-direction: column;
    }
    .userInfo{
        margin-left: .2rem;
        display: flex;
        align-items: center;
        margin-top: .2rem;
    }
    .userImg{
        background-color: #F6F8FA;
        background-position: center;
        background-size: contain;
        width: .88rem;
        height: .88rem;
        border-radius: 50%;
    }
    .info{
        margin-left: .1rem;
    }
    .userName{
        color: rgb(146, 113, 71);
        font-family: 'PingFangSC-Mediuem';
    }
    .userContent{
        color: rgb(146, 113, 71);
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
    }
    .vipSay{
        color: rgb(146, 113, 71);
        font-family: 'PingFangSC-Regular';
        margin-bottom: .2rem;
        margin-top: .3rem;
        font-size: .24rem;
        margin-left: .2rem;
    }
    .vipRight{
        width: 6.86rem;
        margin: 0 auto;
        margin-top: .4rem;
    }
    .vipRightTitle{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        color:#333333;
        font-family: 'PingFangSC-Mediuem';
        font-size: .36rem;
    }
    .rightContent{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .right{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: .4rem;
    }
    .rightImg{
        background-position: center;
        background-size: contain;
        width: 1.08rem;
        height: 1.08rem;
    }
    .rightImg.first{
        background-image: url(../assets/img/1-icon@2x/1-26foodicon.png);
    }
    .rightImg.second{
        background-image: url(../assets/img/1-icon@2x/1-27sporticon.png);
    }
    .rightImg.third{
        background-image: url(../assets/img/1-icon@2x/1-28storeicon.png);
    }
    .rightTitle{
        color:#333333;
        font-family: 'PingFangSC-Mediuem';
        margin-top: .2rem;
    }
    .openVip{
        width: 6.86rem;
        margin: 0 auto;
        margin-top: .6rem;
    }
    .openTitle{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        color:#333333;
        font-family: 'PingFangSC-Mediuem';
        font-size: .36rem;
    }
    .openContainer{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: .4rem;
    }
    .open{
        background-color: #FFF;
        border-radius: .1rem;
        width: 2.16rem;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .openContent{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .openTime{
        color:#333333;
        font-family: 'PingFangSC-Mediuem';
        font-size: .36rem;
    }
    .openMoney{
        font-family: 'PingFangSC-Bold';
        color: rgb(146, 113, 71);
        font-size: .24rem;
        margin-top: .2rem;
    }
    .openMoney span{
        font-size: .44rem;
    }
    .beforeMoney{
        margin-top: .2rem;
        font-size: .24rem;
        color: rgb(146, 113, 71);
        font-family: 'PingFangSC-Regular';
        text-decoration: line-through;
    }
    .openSay{
        margin-top: .2rem;
        color:#999999;
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
    }
    .payVip{
        position: fixed;
        right: 0;
        bottom: 0;
        width: 100vw;
    }
    .payVipContent{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .paySay{
        color:#333333;
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }
    .payRadio{
        margin-right: .2rem;
    }
    .clickPay{
        background-image: url(../assets/img/1-icon@2x/1-30clickPay.png);
        background-position: center;
        background-size: contain;
        width: 100%;
        height: 1.04rem;
        margin-bottom: .4rem;
        border-radius: 1rem;
    }
</style>